<template>
  <div style="height: 100%;overflow:hidden"
       class="main">
    <x-header :left-options="{preventGoBack:true,backText: ''}"
              @on-click-back="backhome">质量整改单</x-header>
    <div class="main-container"
         style="overflow:auto;height:93%">
      <v-touch v-on:swiperight="onSwipeRight"
               :swipe-options="{direction: 'horizontal'}">
        <!-- <div id="map"></div> -->
      <tab bar-position="bottom">
        <tab-item :selected="flagC"
                  @on-item-click="getData">整改单内容</tab-item>
        <tab-item @on-item-click="queryFlowInfo"
                  :selected="flagF">流程信息</tab-item>
      </tab>
      <div class="sup"></div>
        <div v-if="flagC">
          <group>
            <cell title='项目（部）'
                  v-model="pro"></cell>
            <!-- <span>{{pro}}</span>  -->
            <cell v-model="checkDateS"
                  title="检查日期开始"> </cell>
            <cell v-model="checkDateE"
                  title="检查日期截至"> </cell>
            <cell title="监理单位"
                  v-model="supervision"
                  text-align=right></cell>
            <cell title="施工单位"
                  v-model="construct"
                  text-align=right></cell>
            <cell title="整改编号" v-model="rectifyNo"></cell>
            <cell title="整改单位选项"
                  v-model="rectifyUnit"></cell>
            <cell title="总监理工程师（总监代表）"
                  :options="options1"
                  v-model="option"></cell>
            <cell title="项目经理"
                  :options="options1"
                  v-model="option2"></cell>
            <cell title="项目总工"
                  :options="options1"
                  v-model="option3"></cell>
            <group title="检查类型">
              <cell placeholder="请输入整改内容概况"
                    v-model="DESCRIPTION"
                    readonly></cell>
            </group>
            <group>
              <cell title="整改内容明细">
                <x-icon id="headeright"
                        type="ios-arrow-up"
                        size="30"
                        @click="showDetail"
                        v-if="isActive"></x-icon>
                <x-icon id="headeright"
                        type="ios-arrow-down"
                        size="30"
                        @click="showDetail"
                        v-if="!isActive"></x-icon>
              </cell>
              <pull>
                <div class="collapse-wrap"
                     v-show="isActive">
                  <slot>

                    <!-- 明细表内容 -->
                    <group v-for="(item, i) in listR"
                           :key="i">
                      <!-- <divider>——————————————————————————</divider> -->
                      <div class="sup"></div>
                      <cell title="检查项目"
                            v-model="item.CHECKTYPE.val"></cell>
                      <cell title="类型" v-model="item.TYPE.val"></cell>
                      <group title="整改前图片" style="border-top: 1px solid #f5f5f5;">
                        <picture-upload :fieldToken='item.IMAGEBEFORECHECK.val'
                                        :pageToken='item.IMAGEBEFORECHECK.val'
                                        :value='item.IMAGEBEFORECHECK.val'
                                        :readonly='true'></picture-upload>
                      </group>
                      <cell title="整改状态"
                            v-model="item.CHECKSTATE.val"></cell>

                      <cell title="说明"
                            v-model="item.EXPLAIN.val"></cell>
                      <group title="整改后图片" style="border-top: 1px solid #f5f5f5;">
                        <picture-upload :fieldToken='item.IMAGEAFTERCHECK.val'
                                        :pageToken='item.IMAGEAFTERCHECK.val'
                                        :value='item.IMAGEAFTERCHECK.val'
                                        :readonly='true'></picture-upload>
                      </group>
                      <cell title="描述"
                            v-model="item.DESCRIPTION.val"></cell>
                      <cell title="上报人"
                            v-model="item.REPORTERFULLNAME.val"></cell>
                    </group>
                    <!-- <divider>——————————————————————————</divider> -->
                    <div class="sup"></div>
                  </slot>
                </div>
              </pull>
            </group>
            <cell title="是否停工"
                  v-model="isStop"></cell>
            <cell title="停工备注" v-model="STOPCONTENT" v-show="stopContentFlag"></cell>
            <cell v-model="rectifyDate"
                  title="整改期限"> </cell>
            <x-switch title="短信通知"
                      v-model="notifyMethod"
                      :value-map="['0,0,0','0,1,0']"
                      disabled></x-switch>

            <cell title="检查组长"
                  v-model="person"></cell>

            <cell title="检查组员"
                  v-model="person5"></cell>

            <cell title="签发人"
                  v-model='name'></cell>
            <cell title="联系电话"
                  v-model='phone'></cell>
            <cell title="填写部门"
                  v-model='dept'></cell>
            <cell title="填写时间"
                  v-model='inputDate'></cell>
            <group v-show="rectifyUnitFlag">
                <cell title="施工、监理确认"
                      v-model="person2"></cell>
            </group>
            <group v-show="rectifyUnitFlag">
                <cell title="整改负责人"
                      v-model="person3"></cell>
            </group>
            <group>
                <cell title="监理单位负责人"
                      v-model="person4"></cell>
            </group>

            <cell title="复核人"
                  v-model="person6"></cell>

            <cell title="项目负责人"
                  v-model="PRJMANAGERFULLNAME"></cell>

          </group>
        </div>
        <div v-if="flagF">
            <div style="display:flex;padding:15px">
            <img src="../../assets/img/deal_progress.png" width="25"/>
            <div style="margin-left:2%;">处理过程</div>
          </div>
          <div v-for="(item,index) in flowList" :key="index" class="flowlist_div">
            <img src="../../assets/img/flowlist_icon.png" class="flowlist_icon" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'"/>
            <div class="flowlist_div_son" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'">
              <div class="dutyPerson">{{item.assignessName}}</div>
              <div class="commandMes">{{item.name}}</div>
              <div class="commandMes">{{item.commandMessage}}</div>
              <div class="createTime">{{item.createTime}}</div>
            </div>
           </div>
          <div v-for="(item,index) in flowListIng" :key="index" class="flowlist_div">
            <img src="../../assets/img/flowlist_icon_todo.png" class="flowlist_icon"/>
            <div class="flowlist_div_son">
              <div class="dutyPerson">{{item.assignessName}}</div>
              <div class="commandMes">{{item.name}}</div>
              <div class="waitToDo">待办</div>
              <div class="createTime">{{item.createTime}}</div>
            </div>
           </div>
  
        </div>
      </v-touch>
    </div>
  </div>
</template>
 
<script>
import * as L from 'leaflet'
import pull from '@/views/qualityReport/pull-down.js'
import personTree from '@/components/tree/personTree'
//Vue.L = Vue.prototype.$L = L 
import { Group, Cell, XButton, Box, GroupTitle, Flexbox, FlexboxItem, Divider, Calendar, PopupPicker, Toast, XInput, InlineXSwitch, XSwitch, FormPreview, Tab, TabItem } from 'vux'
var map = null;
var marker = null;
var flag = 0;
export default {
  components: {
    XButton,
    Box,
    GroupTitle,
    Group,
    Flexbox,
    FlexboxItem,
    Divider,
    Group,
    Cell,
    Calendar,
    PopupPicker,
    Toast,
    XInput,
    pull,
    personTree,
    InlineXSwitch,
    XSwitch,
    FormPreview,
    Tab,
    TabItem
  },
  name: 'HelloWorld',
  data () {
    return {
      proId: this.$route.query.proId,
      pro: this.$route.query.pro,
      //prjId: this.$route.query.proId,
      GUID: this.$route.query.GUID,
      name: '',
      phone: '',
      dept: '',
      userId: "",
      DESCRIPTION: "",
      pageToken: "",
      fieldToken: "",
      buttonid: "",
      inputDate: "",
      inputDateFix: "",
      // map:"",
      checkDateS: "",
      checkDateE: "",
      supervision: "",
      construct: "",
      rectifyDate: "",
      toastValue: false,
      toastValueErr: false,
      err: '',
      isActive: true,
      options1: ["在岗", "不在岗"],
      option: "",
      option2: "",
      option3: "",
      options2: ["是", "否"],
      isStop: "",
      person: "",
      personId: "",
      person2: "",
      person2Id: "",
      person3: "",
      person3Id: "",
      person4: "",
      person4Id: "",
      person5: "",
      person5Id: "",
      fatherClass: [],
      checkPro: [],
      checkItems: [],
      descriptionDetail: [],
      image: [],
      listR: [],
      proNum: 0,
      fixStop: 1,
      notifyMethod: '0,0,0',
      person6: '',
      stopContentFlag:false,
      STOPCONTENT:"",
      PRJMANAGERFULLNAME:"",
      flagC:true,
      flagF:false,
      flowList:[],
      flowListIng:[],
      state:"",
      rectifyUnit:"",
      rectifyUnitFlag:true,
      rectifyNo:""
    }
  },
  methods: {
    onSwipeRight () {
      this.$router.push({ path: '/qualityReport', query: { proId: this.proId, proDept: this.proDept, pro: this.pro, site: this.centerPosition } })
    },
    backhome () {
      this.$router.push({ path: '/qualityReport', query: { flag: 1 } })
    },
    showDetail () {
      this.isActive = !this.isActive;
    },
    queryFlowInfo(){
      this.flagF = true
      this.flagC = false
      let vText = '{"_method":"flow.getInstIdByBizKey","_param":["' + this.GUID + '"]}';
      this.$ajax({
        url : this.COMMON_URL,
        method : 'post',
        data : {
         FixJSON : vText
        },
        async : false
      }).then(res=>{
        // console.log("看看instId",res);
        var params = '{"_method":"flow.getTaskProcess","_param":["' + res.data.instId + '"]}';
        this.$ajax({
          method: 'post',
          url: this.COMMON_URL, //+ '?_objName=formflow&_viewId=tasklist',
          data: {
            FixJSON: params
          }
          }).then((res) => {
            console.log("flowlist",res);
              this.flowList = res.data.taskListEnd;
              this.flowListIng = res.data.taskListIng;
          })
      })
    },
    getData(){
      this.flagC = true;
      this.flagF = false;
       var params = { "_method": "formService.getFormData", "requestEventData": { "eventType": "formInitEvent", "formType": 1, "bizObjId": "PMQUALITY_RECTIFY", "formId": "PMQUALITY_RECTIFY_add" }, "useType": "view", "getData": { "useType": "view", "objName": "PMQUALITY_RECTIFY", "relatedObj": ["PMQUALITY_RECTIFY", "PMQUALITY_RECTIFY_DETAIL"], "pk": [{ "key": "GUID", "value": this.GUID }] }, "getSysVar": { "INPUTERFULLNAME": "{sysLoginUser.userName}", "INPUTERNAME": "{sysLoginUser.loginId}", "PHONENUM": "{sysLoginUser.mobil}", "INPUTERDEPTNAME": "{sysLoginUser.orgName}", "INPUTDATE": "{sysDate.Today}" }, "getFormVerify": { "objName": "PMQUALITY_RECTIFY", "viewId": "PMQUALITY_RECTIFY_add" }, "getToolbar": { "useType": "view", "objName": "PMQUALITY_RECTIFY", "viewId": "PMQUALITY_RECTIFY_add" } };
    let json = {
      FixJSON: JSON.stringify(params),
    };
    this.$ajax({
      // async:false,
      url: this.COMMON_URL, //+ "?_isBreak=false&objName=PMQUALITY_RECTIFY&_useType=view&_pk=GUID&_pkValue=" + this.GUID,
      method: 'post',
      // data: this.signMD5(json)
      data:json
    }).then(res => {
      console.log("213",res);
      this.listR = res.data.getData.PMQUALITY_RECTIFY_DETAIL
      this.pro = res.data.getData.PMQUALITY_RECTIFY[0].PRJNAME.val;
      this.checkDateS = res.data.getData.PMQUALITY_RECTIFY[0].MINDATE.val.substring(0, 10);
      this.checkDateE = res.data.getData.PMQUALITY_RECTIFY[0].MAXDATE.val.substring(0, 10);
      this.supervision = res.data.getData.PMQUALITY_RECTIFY[0].SUPERVISIONUNIT.val;
      this.construct = res.data.getData.PMQUALITY_RECTIFY[0].CONSTRUCTIONNAME.val;
      this.option = res.data.getData.PMQUALITY_RECTIFY[0].WORKSTAFF1.val;
      this.option2 = res.data.getData.PMQUALITY_RECTIFY[0].WORKSTAFF2.val;
      this.option3 = res.data.getData.PMQUALITY_RECTIFY[0].WORKSTAFF3.val;
      this.DESCRIPTION = res.data.getData.PMQUALITY_RECTIFY[0].RECTIFYCONTENT.val;
      // this.isStop = res.data.getData.PMQUALITY_RECTIFY[0].ISSTOP.val == 1 ? "是" : "否";
      this.isStop = res.data.getData.PMQUALITY_RECTIFY[0].ISSTOP.val;
      this.STOPCONTENT = res.data.getData.PMQUALITY_RECTIFY[0].STOPCONTENT.val;
      this.rectifyDate = res.data.getData.PMQUALITY_RECTIFY[0].RECTIFYDATE.val.substring(0, 10);
      this.notifyMethod = res.data.getData.PMQUALITY_RECTIFY[0].NOTIFYMETHOD.val;
      this.person = res.data.getData.PMQUALITY_RECTIFY[0].INSCHIEFRECHIFFFULLNAME.val;
      this.person5 = res.data.getData.PMQUALITY_RECTIFY[0].INSPECTIONMEMBERFULLNAME.val;
      this.name = res.data.getData.PMQUALITY_RECTIFY[0].INPUTERFULLNAME.val;
      this.phone = res.data.getData.PMQUALITY_RECTIFY[0].PHONENUM.val;
      this.dept = res.data.getData.PMQUALITY_RECTIFY[0].INPUTERDEPTNAME.val;
      this.inputDate = res.data.getData.PMQUALITY_RECTIFY[0].INPUTDATE.val.substring(0, 10);
      this.person3 = res.data.getData.PMQUALITY_RECTIFY[0].AUDITUSERFULLNAME1.val;
      this.person4 = res.data.getData.PMQUALITY_RECTIFY[0].AUDITUSERFULLNAME2.val;
      this.person2 = res.data.getData.PMQUALITY_RECTIFY[0].AUDITUSERFULLNAME4.val;
      this.person6 = res.data.getData.PMQUALITY_RECTIFY[0].AUDITUSERFULLNAME3.val;
      this.PRJMANAGERFULLNAME = res.data.getData.PMQUALITY_RECTIFY[0].PRJMANAGERFULLNAME.val;
      this.state = res.data.getData.PMQUALITY_RECTIFY[0].STATE.val;
      this.rectifyUnit = res.data.getData.PMQUALITY_RECTIFY[0].RECTIFYUNIT.val;
      this.rectifyNo = res.data.getData.PMQUALITY_RECTIFY[0].RECTIFYNO.val;
      if(this.isStop == "1"){
        this.isStop = "是"
      }else if(this.isStop == "0"){
        this.isStop = "否"
      }else{
        this.isStop = "部分停工"
        this.stopContentFlag = true 
      }
      if(this.rectifyUnit == '施工单位'){
        this.rectifyUnitFlag = true
      }else{
        this.rectifyUnitFlag = false
      }
      //明细表根据TYPEORDERID排序
      if(this.listR.length > 0 && this.listR[0].hasOwnProperty("TYPEORDERID")){
        this.listR.sort(this.compare("TYPEORDERID"));
        console.log("排序list",this.listR);
      }
    });
    },
    //根据不同字段对明细表进行排序
    // property为需要排序的字段
    compare(property){
      return function(a,b){
        var value = a[property].val;
        var valueCompared = b[property].val;
        return value - valueCompared;
      }
    },
  },
  mounted () {
   this.getData();
  },
  watch: {

  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .transition-view /deep/.weui-cells__title {
      margin-top: 0.77em;
    margin-bottom: 0.3em;
    padding-left: 15px;
    padding-right: 15px;
    color: #353535;
    font-size: 14px;
} */
/* .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-width: 1px 0 0 1px;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  top: 8px;
  left: 7px;
}
.transition-view /deep/ .vux-header .vux-header-title {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #333;
} */

#map {
  width: 100%;
  height: 25%;
}
.content {
  width: 100%;
  height: 75%;
}
.vux-x-icon {
  fill: #d9d9d9;
}
.cell-x-icon {
  display: block;
  fill: green;
}
.transition-view /deep/ .weui-cells__title {
  color: #333;
}
  .sup{
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #F5F5F5;
}
.flowlist_div{
  display:flex;
  margin-bottom: 10px;
}
.flowlist_icon{
  width:30px;
  height:30px;
  padding:10px;
}
.createTime{
  padding: 0 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.commandMes{
  padding: 10px 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.dutyPerson{
  padding: 10px 10px 5px 10px;
  font-size:16px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(25,25,25,1);
  line-height:24px;
}
.flowlist_div_son{
  background-color: #F9F9F9;
  width: 80%;
  height: 120px;
}
.waitToDo{
  padding: 10px 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:#eea347;
  line-height:20px;
}
</style>